<template>
    <div class="tanklist">
        <p>任务列表</p>
        <main>
            <div :class="{list:true,unFinished:!item.status}" v-for="(item,index) in store.tanklist" :key="index">
                <input type="checkBox" :checked="item.status" @click="change(item.id)">
                <div class="content">sds</div>
                <div class="dele" @click="del(item.id)">删除</div>
            </div>
        </main>
    </div>
</template>

<script setup>
//从对应模块中导入useStore方法
import {useCounterStore} from '../stores/counter'
//调用useCounterStore方法， 获取store对象
var store =useCounterStore()

//调仓库中的方法修改和删除任务状态
var change=(id)=>{
    store.changeStatus(id)
}
var del=(id)=>{
    store.deletetank(id)
}


</script>

<style scoped>
.tanklist {
    height: 500px;
    width: 100%;
    /* background-color: darkblue; */
}

.tanklist p {
    font-weight: 700;
    padding-left: 10px;
    margin-top: 15px;
}

main {
    height: 100%;
    width: 100%;
}

.list {
    height: 40px;
    width: 100%;
    background-color: lightblue;
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
}
.list.unFinished{
    background-color: red;
}

.content {
    width: 200px;
    height: 100%;
    text-align: center;
    /* background-color: beige; */
    line-height: 40px;
    margin-left: 40px;
}

.dele {
    height: 100%;
    width: 60px;
    /* background-color: beige; */
    line-height: 40px;
    text-align: center;

}
</style>